<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>公告列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

<script type="text/javascript" src="./verify.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">公告管理</a>
            <a>
              <cite>公告列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" id="notice_name" placeholder="请输入公告名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit=""  id="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                </div>
<!--                <div class="layui-card-header">-->
<!--                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
<!--                </div>-->
                <div class="layui-card-body layui-table-body layui-table-main">
<!--                   数据表格 -->
                    <table id="notice" lay-filter="notice"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!--展示当前公告的详细信息-->
<div class="layui-panel" hidden id="noticeInfo">
    <div style="padding: 30px;" id="info">

    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="watch">查看详情</a>
</script>

<script type="text/html" id="delDemo">
    <a class="layui-btn layui-btn-danger" lay-event="del">删除公告</a>
</script>

<script src="./commonTableerify.js"></script>
<script>
    layui.use(['layer','form','table'], function(){
        var table = layui.table;
        var $=layui.jquery;
        var form = layui.form;

        //公告展示列表
        table.render({
            elem: '#notice'
            ,height: 600
            ,url: 'get_all_notice'
            ,method:'post'
            ,where: {
                'token': window.localStorage.managerToken
            }
            ,cols: [
                [ //表头
                    {field: 'name', title: '公告名称', width:250}
                    ,{field: 'publish', title: '公告发布时间', width: 240}
                    ,{field: 'expire', title: '公告剩余过期时间',width: 240}
                    ,{field: 'info',hide:true}
                    ,{fixed: 'right', title:'查看公告详情', toolbar: '#barDemo', width:250}
                    ,{fixed: 'right', title:'删除公告', toolbar: '#delDemo', width:250}
                ]
            ]
            ,page: true //开启分页
            , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
            , limit: 5  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                verify(res);
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": 0, //解析接口状态
                    "msg": "ok", //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

          //工具条事件
        table.on('tool(notice)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

         if(layEvent === 'watch')
         {
             const info_index=layer.open({
                 type: 1,
                 area: ['500px', '300px'],
                 content: $('#noticeInfo')
             });
           $("#info").append(data.info)
           layer.title("公告详情",info_index);
         }
         //删除公告
         else if(layEvent === "del")
         {
             const ndi=layer.confirm('确认删除', {
                 btn: ['确认', '取消']
                 ,yes: function(index, layero)
                 {

                     $.ajax({
                         url: "del_notice_by_key",
                         type: "post",
                         data: {"token":window.localStorage.managerToken,"key":data.name+"&"+data.publish},
                         success: function (res)
                         {
                             if(res.status==="handle_success")
                             {
                                 layer.msg("删除成功",{icon:1});
                                 obj.del();
                             }else
                             {
                                 verify(res);
                             }
                         },
                         error: function ()
                         {
                             layer.msg("删除失败",{icon:5})
                         }
                     })

                 }
             });
           layer.title("删除当前公告",ndi)
         }
        });


        $("#sreach").click(function (){
            //表格重载实现搜索功能
            //上述方法等价于
            table.reload('notice',
                {
                    url: 'get_target_notice',
                    method:'post'
                    ,where:
                        {
                            //公告的名称
                            key : $("#notice_name").val(),
                            token: window.localStorage.managerToken
                        }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据

        })


    })
</script>
</html>